<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<title>聊天</title>
<link rel="stylesheet" href="/plugins/layui/css/layui.mobile.css" media="all" />
<script type="text/javascript" src="/js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
</head>
<body>





	<script>
var msgs =null;
var lm = null;
 
layui.use(['mobile'], function(layim){
	    var mobile = layui.mobile
         ,layim = mobile.layim
         ,laytpl = layui.laytpl
         ,layer = mobile.layer;
	     data = null; 
	    $.get('/user/getalluser',  function(str){
	    	var json =eval("("+str+")")
		    data = json.data;
	    	  //基础配置
	  	  layim.config({
	  		  init: data, 
	  	    title:"我的IM"
	  	    ,notice:true
	  	    //获取群员接口（返回的数据格式见下文）
	  	    ,members: {
	  	      url: '' //接口地址（返回的数据格式见下文）
	  	      ,type: 'get' //默认get，一般可不填
	  	      ,data: {} //额外参数
	  	    }
	  	    
	  	    //上传图片接口（返回的数据格式见下文）
	  	    ,uploadImage: {
	  	      url: '/user/imgupload' //接口地址
	  	      ,type: 'post' //默认post
	  	    } 
	  	    
	  	    //上传文件接口（返回的数据格式见下文）
	  	    ,uploadFile: {
	  	      url: '/user/fileupload' //接口地址
	  	      ,type: 'post' //默认post
	  	    } ,
	  	    brief:false,
	  		min:true,
	  		isNewFriend:false,
	  		isgroup:false,
	  		voice:true,
	  		copyright:true
	  	   ,msgbox: '/user/message' //消息盒子页面地址，若不开启，剔除该项即可
	  	    //,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
	  	    ,chatLog: '/user/historymessage' //聊天记录页面地址，若不开启，剔除该项即可
	  	  });
		});
	   
	    //查看聊天信息
	    layim.on('detail', function(data){
	      //console.log(data); //获取当前会话对象
	      layim.panel({
	        title: data.name + ' 聊天信息' //标题
	        ,tpl: '<div style="padding: 10px;">自定义模版，<a href="http://www.layui.com/doc/modules/layim_mobile.html#ondetail" target="_blank">参考文档</a></div>' //模版
	        ,data: { //数据
	          test: '么么哒'
	        }
	      });
	    });
	    
	    $(document).on("touchend",".closetImframeByLayim",function(){
	    	parent.layer.closeAll();
	     });
	  
	  //监听查看更多记录
	    layim.on('chatlog', function(data, ul){
	      $.post('/user/historymessageajax',{id:data.id,pageSize:2000},  function(str){
		    	var json =eval("("+str+")")
			     result = json.data;
		    	var insertData =   { list: result,  id:data.id }
		    	var template = '<div class="layui-unselect layim-content"><div class="layim-chat layim-chat-friend"><div class="layim-chat-main" style="height:98%"><ul> '
			    	+'{{#  layui.each(d.list, function(index, item){ }}<li class="layim-chat-li {{#  if(d.id === item.senduser){ }}layim-chat-mine {{#  } }} "><div class="layim-chat-user"><img src="{{ item.avatar}}"><cite>{{ item.sendusername}}</cite></div>'
			    	+'<div class="layim-chat-text">{{item.content}}</div></li>{{#  }); }}</ul></div></div></div>'
			    	
		    	var temphtml = "";
		    	 laytpl(template).render(insertData, function(html){
		    		 temphtml =html;
		    	 }); 
			      layim.panel({
			        title: '与 '+ data.name +' 的聊天记录' //标题
			        ,tpl: temphtml//模版
			        ,data: { //数据
			          list: result,
			          id:data.id
			        }
			      });
	      })
	  
	    });
	  
	    layim.on('moreList', function(obj){
	    	 /*  switch(obj.alias){ //alias即为上述配置对应的alias
	    	    case 'find': //发现
	    	      layer.msg('自定义发现动作');
	    	    break;
	    	    case 'share':
	    	      layim.panel({
	    	        title: 'share' //分享
	    	        ,tpl: '<div style="padding: 10px;">自定义模版，{{d.data.test}}</div>' //模版
	    	        ,data: { //数据
	    	          test: '123'
	    	        }
	    	      });
	    	    break;
	    	  } */
	    	});   
	   
	  layim.on('ready', function(res){
		  lm =  mobile.layim; 
		  showMsg();
		  
	   }); 
	  //监听发送消息
	  layim.on('sendMessage', function(data){
	     parent.doSend(data);
	  }); 
	   
	  layim.on('online', function(status){
		  //console.log(status); //获得online或者hide
		 /*  var stateVal = "";
		  if(status=="hide"){
			  stateVal ="hide";
		  }
		  $.get("/user/onlinestate",{ state: stateVal }); */
	   });  
	}); 

   function showMsg(){
	   if(msgs!=null){
			  for(var i=0;i<msgs.length;i++){
					
					 var message = msgs[i];
					 var content =  message.content.replace(/\r?\n/g,  '<br>') ; 
					 lm.getMessage({
					      username: message.username
					      ,avatar: message.file
					      ,id: message.user
					      ,type: "friend"
					      ,cid: Math.random()*100000|0  
					      ,content: content
					      ,timestamp: new Date().getTime()
					  }); 
				} 
	      }   
	   
   }
  
</script>
</body>
</html>